<template>
	<div class="home">
		<!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
			<head-com :bannerData="bannerList"></head-com>
			<div class="bg"></div>
			<div class="list-head" v-if="mainData.length > 0">
				<div class="list-head-icon clearfix">
					<img src="@/assets/img/home_img05.png" alt="">
					<h3>产业升级</h3>
				</div>
				<span class="fp-more" @click="toPurchase">查看更多 <van-icon name="arrow" color="#CDCDCD" size="14px" class="fp-icon" /></span>
			</div>
			<mainlist-com :mainData="mainData"></mainlist-com>
			<div v-if="mainData.length > 0">
				<aiding-com></aiding-com>
				<todayprice-com></todayprice-com>
				<completelist-com :orderData="orderListData"></completelist-com>
				<div class="market-container">
					<div class="market-container-title">
						<div class="market-container-title-left">
							<img src="../../assets/img/home_img07.png" alt="">
							<span>行情数据</span>
						</div>
						<p>{{priceListTitle}}</p>
					</div>
					<div class="market-box">
						<ul class="market-tabs">
							<li v-for="(item, index) in marketTabList" :key="index" :class="index == marketActiveTab ? 'market-tab-active' : ''" @click="changeMarketList(index)">{{item}}</li>
						</ul>
						<div class="market-content">
							<ve-line 
								:data="chartData" 
								:loading="loading"
								:data-empty="dataEmpty"
								:settings="chartSettings" 
								:colors="colors"
								:grid="grid"
								:tooltip-visible="tooltipVisible"
								legend-position="bottom"
								width="100%"
								height="250px"
							>
							</ve-line>
						</div>
					</div>
				</div>
				
				<!-- <echarts-com></echarts-com> -->
				<foot-com :telData="cusumerTel" @hideEchart="hideEchart"></foot-com>
			</div>
		<!-- </van-pull-refresh> -->
		<router-view />
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import Vue from 'vue';
	import { PullRefresh } from 'vant';
	Vue.use(PullRefresh);
	
	import HeadCom from './component/Head.vue'
	import MainlistCom from './component/MainList.vue'
	import AidingCom from './component/Aiding.vue'
	import TodaypriceCom from './component/TodayPrice.vue'
	import CompletelistCom from './component/CompleteList.vue'
	import EchartsCom from './component/Echarts.vue'
	import FootCom from './component/Footer.vue'
	
	const EMPTY_DATA = {
		columns: [],
		rows: []
	}
	export default {
		components: {
			HeadCom,
			MainlistCom,
			AidingCom,
			TodaypriceCom,
			CompletelistCom,
			EchartsCom,
			FootCom,
			VeLine
		},
		data() {
			this.chartSettings = {
				min: ['40'],
				max: ['90'],
				// min: ['dataMin', 'dataMin'],
				// max: ['dataMax', 'dataMax'],
				// xAxisType: 'time',
				yAxisName: ['单价：元/kg', ''],
				legend: {
					bottom: '0'
				}
			}
			this.colors = ['#31bc8d', '#f5933d', '#68a4eb']
			this.grid = { //调整图例右边距
				right: 4,
				left: 13
			}
			return {
				cusumerTel: '',
				bannerList: [],
				orderListData: [],
				helpData: [],
				count: 0,
				isLoading: false,
				mainData: [],
				marketTabList: ['近一个月', '近三个月', '近六个月', '近一年'],
				marketActiveTab: 0,
				chartData: {
					columns: [],
          			rows: []
				},
				loading: false,
        		dataEmpty: false,
				loginFlag: false, //登录状态
				tooltipVisible: true, //是否显示提示框
				priceListTitle: '', //折线图行情名称
			}
		},
		watch: {
			// 如果数据有变化，会再次执行该方法
			// "$route": "orderList"
		},
		created() {
			this.tooltipVisible = true;
			 this.getUserInfo();
			// banner 图
			this.bannerGetData();
			
			this.productListData()

			this.getMarketData(1)
			
			this.orderList()
			
			this.getTelData()
		},
		mounted() {
			Storage.del('price')  //  清除求购中心价格存储
			window.scrollTo({ 
				top: 0, 
				left: 0, 
				behavior: "smooth" //平滑滚动
			})
		},
		beforeDestroy() {
			this.tooltipVisible = false;
			setTimeout(() => {
				this.tooltipVisible = true;
			}, 300)
		},
		destroyed() {
			this.tooltipVisible = false;
			setTimeout(() => {
				this.tooltipVisible = true;
			}, 300)
		},
		methods: {
			getUserInfo() { //获取用户信息
			  if(this.$tool.userLoginFlag()){
			    this.loginFlag = true;
			    this.$api.get('/api/user/detail?noLoading')
			      .then((res) => {
			        this.$store.commit("setUserInfo", res.data);
			      })
			  }else{
			    this.loginFlag = false;
			  }
			},
			// banner 数据
			bannerGetData(){
				this.$api.get('/api/banner/list?noLoading')
				.then(({data})=>{
					this.bannerList = data;
				})
			},
			//  推荐资源,商品列表
			productListData(){
				this.$api.get('/api/product/list',{ pgCt: 1, pgSz: 3 })
				.then((data)=>{
					this.mainData = data.data.records;
				})
			},
			// 已成交资源,近期成交订单
			orderList(){
				this.$api.get('/api/order/list?noLoading',{ pgCt: 1, pgSz: 3})
				.then(({data})=>{
					this.orderListData = data.records;
				})
			},
			// 客服电话
			getTelData(){
				this.$api.get('/api/index/consumer_tel?noLoading')
				.then(({data})=>{
					this.cusumerTel = data.cusumerTel;
				})
			},
			// 下拉刷新
			onRefresh() {
			  setTimeout(() => {
				this.bannerGetData();
				this.productListData()
				this.getMarketData(1)
			    this.$toast('刷新成功');
			    this.isLoading = false;
			  }, 500);
			},
			changeMarketList(index) {
				this.marketActiveTab = index;
				this.chartData = {
					columns: [],
          			rows: []
				};
				switch(index) {
					case 0:
						this.getMarketData(1)
						break;
					case 1:
						this.getMarketData(3)
						break;
					case 2:
						this.getMarketData(6)
						break;
					case 3:
						this.getMarketData(12)
						break;
				}
			},
			getMarketData(month) { //折线图
				this.loading = true
				setTimeout(() => {
					this.getMarketDataAjax(month)
				}, 1000)
			},
			getMarketDataAjax(month) { //折现图数据
				let currentDate = new Date(); //当前日期
				let currentYear = currentDate.getFullYear(); //当前年份
				let currentMonth = currentDate.getMonth() + 1; //当前月份
				let currentDay = currentDate.getDate(); //当前天数

				// 数据结束日期
				let endDate = `${currentYear}-${currentMonth < 10 ? '0' + currentMonth : currentMonth}-${currentDay < 10 ? '0' + currentDay : currentDay}`

				// 数据起始日期
				let startYear = '';
				let startMonth = '';
				let startDay = '';

				// 是否跨年
				let acrossTheYearState = false;
				if(currentMonth <= month) {
					acrossTheYearState = true;
				}

				switch(month) {
					case 1: //近一个月
						startYear = acrossTheYearState ? currentYear - 1 : currentYear;
						// 1  2 3 4 5 6 7 8 9 10 11 12
						// 12 1 2 3 4 5 6 7 8 9  10 11	
						startMonth = currentMonth == 1 ? 12 : currentMonth - 1
						startDay = new Date(startYear, startMonth, 0).getDate() <= currentDay ? new Date(startYear, startMonth, 0).getDate() : currentDay;
						break;
					case 3: //近三个月
						startYear = acrossTheYearState ? currentYear - 1 : currentYear;
						// 1  2  3  4 5 6 7 8 9 10 11 12
						// 10 11 12 1 2 3 4 5 6 7  8  9
						startMonth = currentMonth == 1 ? 10 : currentMonth == 2 ? 11 : currentMonth == 3 ? 12 : currentMonth - 3;
						startDay = new Date(startYear, startMonth, 0).getDate() <= currentDay ? new Date(startYear, startMonth, 0).getDate() : currentDay;
						break;
					case 6: //近六个月
						startYear = acrossTheYearState ? currentYear - 1 : currentYear;
						// 1 2 3 4  5  6  7 8 9 10 11 12
						// 7 8 9 10 11 12 1 2 3 4  5  6
						startMonth = currentMonth < 7 ? currentMonth + 6 : currentMonth - 6;
						startDay = new Date(startYear, startMonth, 0).getDate() <= currentDay ? new Date(startYear, startMonth, 0).getDate() : currentDay;
						break;
					case 12: //近一年
						startYear = acrossTheYearState ? currentYear - 1 : currentYear;
						startMonth = currentMonth;
						startDay = currentDay;
						break;
				}
				
				// 月份天数处理
				startMonth = startMonth < 10 ? '0' + startMonth : startMonth;
				startDay = startDay < 10 ? '0' + startDay : startDay;

				// 开始日期
				let startDate = `${startYear}-${startMonth}-${startDay}`;
				let getData = {
					startTime: startDate,
					endTime: endDate
				}
				this.$api.get('/api/quited_price/price_list?noLoading', getData)
					.then((res) => {
						if(res.data.length > 0){
							this.chartData = {
								columns: ['日期', '华东农贸市场', '华北农贸市场', '华南农贸市场'],
								rows: res.data
							}
							this.priceListTitle = res.data[0].product_name
						}else{
							this.chartData = EMPTY_DATA
						}
						this.dataEmpty = !this.chartData.rows.length
						this.loading = false
					})
			},
			toPurchase(){
				this.$router.push({
					path: '/purchase'
				})
			},
			hideEchart() {
				this.tooltipVisible = false;
				setTimeout(() => {
					this.tooltipVisible = true;
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		width: 100%;
		height: 10px;
		background-color: #F8F8F8;
	}
	.list-head{
		width: 100%;
		height: 48px;
		line-height: 48px;
		border-bottom: 1px solid #f2f2f2;
		padding: 0 16px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.list-head-icon{
			display: flex;
			align-items: center;
			img{
				width: 24px;
				vertical-align: middle;
				margin-bottom: 4px;
			}
		}
		h3{
			font-size: 16px;
			color: #344047;
			font-weight: 500;
			margin-left: 10px;
			float: left;
		}
		.fp-more{
			color: #666666;
			font-size: 12px;
			float: right;
			position: relative;
			.fp-icon{
				position: relative;
				right: 0;
				top: 2px;
			}
		}
	}
	
	// 行情数据
	.market-container {
		width: 100%;
		margin-top: 10px;
		padding: 16px 16px 0 16px;
		box-sizing: border-box;
		background-color: #fff;
		.market-container-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
			.market-container-title-left {
				display: flex;
				align-items: center;
				img {
					width: 22px;
					height: 22px;
					margin-right: 11px;
				}
				span {
					font-size: 16px;
					font-weight: 500;
					color: #344047;
				}
			}
			p {
				color: #969C9E;
			}
		}
		.market-box {
			.market-tabs {
				width: 100%;
				height: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16px;
				background-color: #F8F8F8;
				li {
					position: relative;
					width: 25%;
					height: 30px;
					line-height: 30px;
					text-align: center;
					color: #969C9E;
					&::after {
						content: "";
						position: absolute;
						top: 6px;
						right: 0;
						width: 1px;
						height: 18px;
						background-color: #979797;
					}
					&:last-child::after {
						width: 0;
					}
					&.market-tab-active {
						color: #344047;
					}
				}
				li::after {
					
				}
			}
			.market-content {
				width: 100%;
				// padding-left: 4px;
				box-sizing: border-box;
				background-color: #F8F8F8;
			}
		}
	}

	
</style>